<template>
	<view>
		<view class="paypage">
			<view class="main-box">
				<view class="z-flex">
					<view class="money">
						<view class="z-margin-t-24">￥</view>
						<view class="money_text z-font-w">{{ price }}</view>
					</view>
				</view>
				<view class="z-flex">
					<view class="text_999 z-font-24 z-margin-t-24">需要支付</view>
				</view>

				<view class="z-margin-t-60 z-padding-32">
					<view>支付方式</view>
					<view class="pay_box z-padding-32 z-radius-20 z-margin-tb-32" @tap="choosepayway">
						<view class="pay_box_left">
							<image src="/static/service/wx.png" class="wx_img z-margin-r-32" mode="" />
							<view>微信</view>
						</view>
						<image src="../../static/choosed.png" v-if="paytype == 0" class="choose_img" mode="" />
						<image src="../../static/choose.png" v-else class="choose_img" mode="" />
					</view>
					<view class="pay_box z-padding-32 z-radius-20 z-margin-tb-32" @tap="choosepayway">
						<view class="pay_box_left">
							<image src="/static/service/balance.png" class="wx_img z-margin-r-32" mode="" />
							<view>余额</view>
						</view>
						<image src="../../static/choosed.png" v-if="paytype == 4" class="choose_img" mode="" />
						<image src="../../static/choose.png" v-else class="choose_img" mode="" />
					</view>
				</view>
			</view>
			<view class="z-btn z-margin-lr-32 z-flex-0" v-if="type == 1" @tap="repay">确认支付</view>
			<view class="z-btn z-margin-lr-32 z-flex-0" v-else @tap="pay">确认支付</view>
			<view class="" style="height: 20rpx;width: 1rpx;"></view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			paytype: 0,
			price: '',
			order_id: '',
			type: '',
			safeBottom: `30px`,
			add_ids: ''
		};
	},
	onLoad(options) {
		(this.order_id = options.order_id), (this.price = options.price), (this.type = options.type), (this.add_ids = options.add_ids);
	},
	methods: {
		repay() {
			this.pay();
		},
		pay() {
			let data = {
				paytype: this.paytype,
				id: this.order_id
			};
			let url;
			if (this.type == 3) {
				data['price'] = this.price;
				url = 'order/premiumorder';
			} else if (this.type == 2) {
				data['add_ids'] = this.add_ids;
				url = 'order/addorder';
			} else if (this.type == 1) {
				url = 'order/pay';
			}
			http.get(url, data, true, false)
				.then((res) => {
					if (this.paytype == 4) {
						uni.redirectTo({
							url: '/service/result/result?type=' + this.type
						});
					} else {
						uni.requestPayment({
							timeStamp: res.data.pay.timeStamp,
							nonceStr: res.data.pay.nonceStr,
							package: res.data.pay.package,
							signType: res.data.pay.signType,
							paySign: res.data.pay.paySign,
							success: (res) => {
								uni.redirectTo({
									url: '/service/result/result?type=' + this.type
								});
							},
							fail: (res) => {}
						});
					}
				})
				.catch((e) => {
					this.util.toast(e.data.msg);
				});
		},
		choosepayway() {
			this.paytype = this.paytype === 4 ? 0 : 4;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.paypage {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.main-box {
	flex: 1;
	overflow-y: auto;
}
.money {
	display: flex;
	color: $uni-mainmoneycolor;
	align-items: center;
	margin-top: 100rpx;
}

.money_text {
	font-size: 78rpx;
}

.pay_box {
	background-color: #f5f7f9;
	box-sizing: border-box;
	margin: 32prx auto;
	width: 686rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pay_box_left {
	display: flex;
	align-items: center;
}

.wx_img {
	width: 40rpx;
	height: 40rpx;
}
.choose_img {
	width: 32rpx;
	height: 32rpx;
}
</style>
